<template>
	<view class="page">
		<view class="order_status-wrap order_success">
			<!-- 待支付 S -->
			<view class="l-wrap" v-if="orderStatus==='toBePaid'">
				<image class="icon" src="../static/tobepaid-icon.png" mode=""></image>
				<text v-if="countDownStartTime">待支付，倒计时：{{countDownStartTime || ''}}</text>
				<text v-else>待支付，订单已超时</text>
			</view>
			<!-- 待支付 E -->

			<!-- 租车审核 S -->
			<view class="l-wrap" v-if="orderStatus==='audit'">
				<image class="icon" src="../static/loading-icon.png" mode=""></image>
				<text v-if="orderDetail.status==1">审核中，请耐心等待平台审核</text>
				<text v-if="orderDetail.status==2">审核失败，请重新提交</text>
			</view>
			<view class="r-wrap" v-if="orderDetail.status==2 && orderStatus==='audit'" @click="handleShowAduitFailReason">
				<uni-icons class="help-icon" type="help" color="#fff" size="18"></uni-icons>
				<text>查看原因</text>
			</view>
			<!-- 租车审核 E -->

			<!-- 待确认 S -->
			<view class="l-wrap" v-if="orderStatus==='toBoConfirmed'">
				<image class="icon" src="../static/loading-icon.png" mode=""></image>
				<text>订单已提交，等待平台确认车辆</text>
			</view>
			<!-- 待确认 E -->

			<!-- 待取车 S -->
			<view class="l-wrap" v-if="orderStatus==='waitingCar'">
				<image class="icon" src="../static/success-icon.png" mode=""></image>
				<text>订单已提交成功</text>
			</view>
			<!-- 待取车 E -->

			<!-- 进行中 S -->
			<view class="l-wrap" v-if="orderStatus==='processing'">
				<image v-if="orderDetail.status==5" class="icon" src="../static/loading-icon.png" mode=""></image>
				<image v-else class="icon" src="../static/success-icon.png" mode=""></image>
				<text v-if="orderDetail.status==5">进行中</text>
				<text v-if="orderDetail.status==6">已还车，请耐心等待平台确认</text>
			</view>
			<!-- 进行中 E -->

			<!-- 已完成 S -->
			<view class="l-wrap" v-if="orderStatus==='completed'">
				<image class="icon" src="../static/success-icon.png" mode=""></image>
				<view v-if="orderDetail.status==7">订单已完成</view>
				<view v-if="orderDetail.status==10">已超时{{orderDetail.zucheSimpleVo.timeOut || ''}}小时，已支付￥<text style="font-size: 36rpx;">{{orderDetail.zucheSimpleVo.timeOutTotal || ''}}</text>
				</view>
			</view>
			<!-- 已完成 E -->

			<!-- 已取消 S -->
			<view class="l-wrap" v-if="orderStatus==='cancelled'">
				<image class="icon" src="../static/fail-icon.png" mode=""></image>
				<text>订单已取消</text>
			</view>
			<!-- 已取消 E -->

			<!-- 追加订单 S -->
			<view class="l-wrap" v-if="orderStatus==='addOrder'">
				<image class="icon" src="../static/success-icon.png" mode=""></image>
				<text>已超时{{orderDetail.zucheSimpleVo.timeOut || ''}}小时，需支付 ￥{{orderDetail.zucheSimpleVo.timeOutTotal || ''}}</text>
			</view>
			<view class="r-wrap" v-if="orderStatus==='addOrder'">
				<uni-icons class="help-icon" type="help" color="#fff" size="24" @click="handleGoFeeDescription"></uni-icons>
			</view>
			<!-- 追加订单 E -->

		</view>

		<view class="info-wrap">
			<view class="top-dack"></view>

			<view class="info tp-w690">

				<view class="chartered_item">
					<image class="img" :src="/^[http | https]/.test(orderDetail.zucheSimpleVo.carImg) ? orderDetail.zucheSimpleVo.carImg : (wwwImgUrl + orderDetail.zucheSimpleVo.carImg) " mode="aspectFill"></image>
					<view class="chartered_info">
						<view class="name">{{orderDetail.zucheSimpleVo.carName}}</view>
						<view class="detail">
							<view class="price" v-if="orderDetail.zucheSimpleVo.comboId">￥ <text style="font-weight: bold;font-size: 36rpx;">{{orderDetail.zucheSimpleVo.price || ''}}</text>/{{orderDetail.zucheSimpleVo.day || ''}}天</view>
							<view class="price" v-else>￥ <text style="font-weight: bold;font-size: 36rpx;">{{orderDetail.zucheSimpleVo.price * orderDetail.zucheSimpleVo.day}}</text>/{{orderDetail.zucheSimpleVo.day || ''}}天</view>
							<view class="passenger_num">自动挡·{{orderDetail.zucheSimpleVo.seat || ''}}座·1.5L</view>
						</view>
					</view>
				</view>

				<view class="info_top-wrap">
					<text class="type">租车</text>
					<view class="date-wrap">
						<text class="time_s"> {{orderDetail.zucheSimpleVo.useCarTime || ''}}</text>
						<text class="duration">{{orderDetail.zucheSimpleVo.day || ''}}天</text>
						<text class="time_e"> {{orderDetail.zucheSimpleVo.takeCarTime || ''}}</text>
					</view>
				</view>

				<view class="info_content-wrap">
					<view class="address-wrap">
						<view class="from">
							<text class="type">取</text>
							<text class="txt ellispsis1">{{orderDetail.zucheSimpleVo.place || ''}}</text>
						</view>
						<view class="to">
							<text class="type">还</text>
							<text class="txt ellispsis1">{{orderDetail.zucheSimpleVo.destination || ''}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 驾驶人信息S -->
		<view class="content-wrap tp-w690" v-if="riderList.length">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">驾驶人信息</view>
					<view class="r-wrap"></view>
				</view>
				<view class="driver_list" :style="{height: showMoreDriver?`${100*riderList.length}rpx`:'100rpx'}">
					<view class="driver_item" v-for="(it_r,in_r) in riderList" :key="in_r">
						<text class="name">{{it_r.name}}</text>
						<view class="num-wrap">
							<text class="phone">{{it_r.phone}}</text>
							<text class="ID">{{it_r.idNumber}}</text>
						</view>
					</view>
				</view>

				<view v-if="riderList.length > 1">
					<view class="more_rider" @click="handleSwithMoreDriver" v-if="!showMoreDriver">
						查看更多<image class="showmore-icon" src="../static/showmore-icon.png" mode="aspectFill"></image>
					</view>
					<view class="more_rider" @click="handleSwithMoreDriver" v-else>
						收起更多<image class="showmore-icon" src="../static/showmore-un-icon.png" mode="aspectFill"></image>
					</view>
				</view>

			</view>
		</view>
		<!-- 驾驶人信息E -->

		<view class="content-wrap tp-w690" v-if="orderDetail.zucheSimpleVo.remark">
			<view class="remark">
				<view class="tit">备注：{{orderDetail.zucheSimpleVo.remark}}</view>
			</view>
		</view>

		<!-- 其他服务S -->
		<view class="content-wrap tp-w690" v-if="serviceList.length!==0 || orderDetail.zucheSimpleVo.driverCost!=0">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">其他服务</view>
					<view class="r-wrap"></view>
				</view>
				<view class="service_list" :style="{height: showMoreService?`${90*(serviceList.length+1)}rpx`:'90rpx'}">
					<view class="service_item" v-for="(it_s, in_s) in serviceList" :key="in_s">
						<text class="name">购买保险<text class="terms" @click="handleGoInsuranceDetail(it_s)">《{{it_s.name}}》</text></text>
						<text class="price">￥{{it_s.price}}</text>
					</view>
					<view class="service_item">
						<text class="name">司机</text>
						<text class="price">￥{{orderDetail.zucheSimpleVo.driverCost}}</text>
					</view>
				</view>
				<view class="ww" v-if="serviceList.length > 1">
					<view class="more_rider" @click="handleSwithMoreService" v-if="!showMoreService">
						查看更多<image class="showmore-icon" src="../static/showmore-icon.png" mode="aspectFill"></image>
					</view>
					<view class="more_rider" @click="handleSwithMoreService" v-else>
						收起更多<image class="showmore-icon" src="../static/showmore-un-icon.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 其他服务E -->

		<!-- 支付明细S -->
		<view class="content-wrap tp-w690">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">支付明细</view>
					<view class="r-wrap"></view>
				</view>
				<view class="service_list" :style="{height: showMoreOrderInfo?`${90*(5 + serviceList.length)}rpx`:'90rpx'}">
					<view class="service_item">
						<text class="name">押金</text>
						<text class="price">￥{{orderDetail.zucheSimpleVo.cashPledge}}</text>
					</view>
					<view class="service_item">
						<text class="name">租金</text>
						<text class="price">￥{{orderDetail.zucheSimpleVo.price}} （{{orderDetail.zucheSimpleVo.day}}天）</text>
					</view>
					<view class="service_item">
						<text class="name">优惠券</text>
						<text class="price">-￥{{orderDetail.qrCodeVo.couponPrice}}</text>
					</view>
					<!-- <view class="service_item">
						<text class="name">积分抵扣</text>
						<text class="price">-￥{{orderDetail.qrCodeVo.jifen}}</text>
					</view> -->
					<!-- 其他服务 -->
					<view class="service_item" v-for="(item, index) in serviceList" :key="index">
						<text class="name">{{item.name}}</text>
						<text class="price">￥{{item.price}}</text>
					</view>
					<view class="service_item">
						<text class="name">司机</text>
						<text class="price">￥{{orderDetail.zucheSimpleVo.driverCost}}</text>
					</view>
					<view class="service_item">
						<text class="name">实付款</text>
						<text class="price" style="color:#FF4A37;font-size: 30rpx;">￥{{orderDetail.qrCodeVo.realPay}}</text>
					</view>
				</view>
				<view class="more_rider" @click="handleSwithMoreOrderInfo" v-if="!showMoreOrderInfo">
					查看更多<image class="showmore-icon" src="../static/showmore-icon.png" mode="aspectFill"></image>
				</view>
				<view class="more_rider" @click="handleSwithMoreOrderInfo" v-else>
					收起更多<image class="showmore-icon" src="../static/showmore-un-icon.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 支付明细E -->

		<!-- 超时明细S -->
		<view class="content-wrap tp-w690" v-if="['9', '10'].includes(orderDetail.status)">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">超时明细</view>
					<view class="r-wrap"></view>
				</view>
				<view class="service_list" :style="{height: showMoreTimeOutDetail?`${90*3}rpx`:'90rpx'}">
					<view class="service_item">
						<text class="name">超时费用</text>
						<text class="price">￥{{orderDetail.zucheSimpleVo.timeOutTotal}}</text>
					</view>
					<view class="service_item">
						<text class="name">支付时间</text>
						<text class="price">{{orderDetail.qrCodeVo.payTime}}</text>
					</view>
					<view class="service_item">
						<text class="name">支付方式</text>
						<text class="price">{{orderDetail.qrCodeVo.payType}}</text>
					</view>
				</view>
				<view class="more_rider" @click="handleSwithMoreTimeOutDetail" v-if="!showMoreTimeOutDetail">
					查看更多<image class="showmore-icon" src="../static/showmore-icon.png" mode="aspectFill"></image>
				</view>
				<view class="more_rider" @click="handleSwithMoreTimeOutDetail" v-else>
					收起更多<image class="showmore-icon" src="../static/showmore-un-icon.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 超时明细E -->

		<!-- 押金退还 S -->
		<view class="content-wrap tp-w690" v-if="orderStatus==='completed'">
			<view class="input-wrap">
				<text>押金退还</text>
				<text class="price">￥{{orderDetail.zucheSimpleVo.cashPledge}}</text>
			</view>
		</view>
		<!-- 押金退还 E -->

		<!-- 退款原因 S -->
		<view class="content-wrap tp-w690" v-if="orderStatus==='cancelled'">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">退款原因</view>
					<view class="r-wrap"></view>
				</view>
				<view class="back_reason">因临时有事时间有调整所以要 退票因临时有事 时间有调整所 以要退票</view>
			</view>
		</view>
		<!-- 退款原因 E -->

		<!-- 二维码展示 S -->
		<CommonCode v-if="orderStatus!=='toBePaid' && orderStatus!=='audit'" :code="orderDetail.qrCodeVo.pingzheng" :used="orderStatus==='processing' || orderStatus==='completed' || orderStatus==='addOrder'"
		 :expired="orderStatus==='cancelled'" :url="/^[http | https]/.test(orderDetail.qrCodeVo && orderDetail.qrCodeVo.qrCode && orderDetail.qrCodeVo.qrCode) ? orderDetail.qrCodeVo.qrCode : (wwwImgUrl + orderDetail.qrCodeVo.qrCode) "></CommonCode>
		<!-- 二维码展示 E -->


		<!-- 订单交易详情 S -->
		<view class="order_info-wrap tp-w690">
			<view class="order_num">订单号：{{orderDetail.orderNo}} </view>
			<view class="order_date">下单时间：{{orderDetail.createTime}}</view>
			<view class="order_paytype" v-if="orderStatus!=='toBePaid'">支付方式： {{orderDetail.qrCodeVo.payType}}</view>
			<view class="order_paytype" v-if=" orderStatus==='processing' || orderStatus==='completed' || orderStatus==='addOrder' ">使用时间：{{orderDetail.zucheSimpleVo.useCarTime}}
			</view>
			<view class="order_paytype" v-if="orderStatus==='cancelled'">取消时间：{{orderDetail.qrCodeVo.cancelTime}}</view>
			<view class="order_paytype" v-if="orderStatus==='completed' || orderStatus==='addOrder'">核销时间：{{orderDetail.qrCodeVo.chargeOffTime}}
				<view class="order_paytype" v-if="orderStatus==='completed' || carReturned || orderStatus==='addOrder'">还车时间：{{orderDetail.zucheSimpleVo.takeCarTime}}</view>
			</view>
		</view>
		<!-- 订单交易详情 E -->


		<view class="btm_btn-wrap" v-if="[0,1,2,3,4,5,9,10].includes(orderDetail.status-0)">
			<view v-if="[0,1,2,3,4].includes(orderDetail.status-0)" class="btn cancle" @click="getCancelRentOrderShouldPayPay">取消订单</view>
			<view v-if="[0].includes(orderDetail.status-0)" class="btn pay" @click="handlePay">支付</view>
			<view v-if="[9].includes(orderDetail.status-0)" class="btn add_pay" @click="handlePay">支付￥{{orderDetail.zucheSimpleVo.timeOutTotal}}</view>
			<view v-if="[5,10].includes(orderDetail.status-0)" class="btn pay" @click="handleReturnCar">还车</view>
			<view v-if="orderDetail.status==2" class="btn pay" @click="handleResubmit">重新提交</view>
		</view>

		<CommonBackReasonSubmit ref="submitReason" @confirm="handleSubmitBackReason"></CommonBackReasonSubmit>

		<CommonBackReasonSubmitMoney ref="submitReasonMoney" :price="orderDetail.qrCodeVo.deduct" @confirm="handleSubmitBackReasonMoney"></CommonBackReasonSubmitMoney>

		<CommonScoreEvaluation ref="score" @confirm="handleSubmitScore"></CommonScoreEvaluation>

		<CommonPay ref="commonPayAdd" :price="orderDetail.zhuijiaTotal" :orderInfo="orderInfo" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess" v-if="orderDetail.status == 9"></CommonPay>
		<CommonPay ref="commonPay" :price="orderDetail.qrCodeVo.realPay" :orderInfo="orderInfo" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess" v-else></CommonPay>

		<RentAuditFail ref="audioFail" :config="audioFailConfig" @confirm="handleResubmit" @cancel="getCancelRentOrderShouldPayPay"></RentAuditFail>
	</view>
</template>

<script>
	import utils from '../../utils/utils.js'
	import CommonBackReasonSubmit from '@/components/common/common-backReason-submit.vue'
	import CommonBackReasonSubmitMoney from '@/components/common/common-backReason-submit-money.vue'
	import CommonScoreEvaluation from '@/components/common/common-scoreEvaluation.vue'
	import CommonPay from '@/components/common/common-pay.vue'
	import RentAuditFail from '@/components/user/rent-auditFail.vue'
	import CommonCode from '@/components/common/common-code.vue'
	export default {
		components: {
			CommonBackReasonSubmit,
			CommonBackReasonSubmitMoney,
			CommonScoreEvaluation,
			CommonPay,
			RentAuditFail,
			CommonCode
		},
		data() {
			return {
				orderId: 0,
				orderStatus: 'toBePaid', // 订单状态
				audioFailConfig: {
					cancleText: '取消订单',
					confirmText: '重新提交',
					content: '驾驶员金小鱼的驾驶证信息有误，请重新提交？'
				},
				showMoreOrderInfo: false, //  是否查看更多支付明细
				showMoreTimeOutDetail: false, //  是否查看更多超时明细
				showMoreService: false, //  是否查看更多其他服务
				showMoreDriver: false, //  是否查看更多驾驶员
				auditSuccess: false, // 审核成功的状态
				carReturned: false, // 已还车的状态
				orderDetail: {}, // 订单详情
				serviceList: [], // 其他服务
				riderList: [], // 驾驶人列表
				countDownStartTime: '00:00',
				timer: null,
				cancleOrderShouldPayMoney: 0, // 取消订单是应该支付的金额
			};
		},
		onLoad(opt) {
			this.orderId = opt && opt.id
			this.orderStatus = opt && opt.orderStatus
			this.getOrderDetail()
		},
		computed: {
			orderInfo() {
				let o = {
					orderNo: this.orderId,
					type: 4,
					money: this.orderDetail.zhuijiaTotal
				}
				return o
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getOrderDetail()
		},
		methods: {
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})
				this.getOrderList()
			},
			getCancelRentOrderShouldPayPay() { // 获取取消订单需要支付的费用
				const _this = this
				if (_this.orderDetail.status == 0) {
					_this.$http.get(_this.$api.getCancelRentOrderShouldPayPay + _this.orderId).then(res => {
						if (res.code === 200) {
							_this.cancleOrderShouldPayMoney = res.data.fee
							_this.$http.get(_this.$api.cancelRentOrder, {
								orderNo: _this.orderId,
								// reason
							}).then(res => {
								if (res.code === 200) {
									let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
									if (routes.length == 1) { // 直接来的详情
										uni.switchTab({
											url: '../../pages/tabbar/home'
										})
									} else {
										uni.navigateBack({
											delta: 1
										});
									}
								}
							})
						}
					})
				} else {
					_this.$http.get(_this.$api.getCancelRentOrderShouldPayPay + _this.orderId).then(res => {
						if (res.code === 200) {
							_this.cancleOrderShouldPayMoney = res.data.fee

							switch (_this.orderDetail.status - 0) {
								case 0:
									// _this.cancleOrderCommon(); // 直接取消订单 不收服务费，
									break;
								case 3:
									_this.$refs.submitReasonMoney.show() // 提交原因，收取服务费
									break;
								default:
									{
										// _this.$refs.submitReason.show() // 提交原因 不收服务费，
										_this.$refs.submitReasonMoney.show() // 提交原因，收取服务费
									}
							}
						}
					})
				}
			},
			cancleOrderCommon(reason) {
				const _this = this
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: ['58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc'],
					success(res) {
						_this.submitWxNotifyConfirm('58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc', res[
							'58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc'])
						// #endif
						_this.$http.get(_this.$api.cancelRentOrder, {
							orderNo: _this.orderId,
							reason
						}).then(res => {
							if (res.code === 200) {
								uni.navigateBack({
									delta: 1
								})
							}
						})
						// #ifdef MP-WEIXIN
					}
				})
				// #endif
			},
			handleSwithMoreDriver() {
				this.showMoreDriver = !this.showMoreDriver
			},
			handleSwithMoreService() {
				this.showMoreService = !this.showMoreService
			},
			handleSwithMoreOrderInfo() {
				this.showMoreOrderInfo = !this.showMoreOrderInfo
			},
			handleSwithMoreTimeOutDetail() {
				this.showMoreTimeOutDetail = !this.showMoreTimeOutDetail
			},
			handleCancleOrder() { // 弹出取消订单的原因弹窗
				// if (this.orderStatus==='waitingCar') { // 平台已经派发车辆，此时取消订单需扣费
				// 	this.$refs.submitReasonMoney.show()
				// } else {
				// 	this.$refs.submitReason.show()
				// }

				if (this.orderDetail.status == 0) {
					this.cancleOrder()
				} else if (this.orderDetail.status == 4) { // 司机已经分配，此时取消订单需要付费
					this.$refs.submitReasonMoney.show()
				} else {
					this.$refs.submitReason.show()
				}
			},
			handleScore() { // 打分评价
				this.$refs.score.show()
			},
			handleGoViewScore() { // 跳转到司机评价
				uni.navigateTo({
					url: '../busTravelEvaluation?id=' + this.orderId
				});
			},
			handleSubmitScore(val) { // 提交评分
				console.log(val);
			},
			handleConfirmCancleOrder() {
				console.log('handleConfirmCancleOrder');
			},
			handleShowAduitFailReason() { // 查看审核失败原因
				this.$refs.audioFail.show()
			},
			handleResubmit() { // 确认重新提交订单  跳转到司机信息补全页面
				uni.navigateTo({
					url: '../../pagesTravel/swiperDriverList?orderNo=' + this.orderId
				});
			},
			handleShowTip() { // 温馨提示弹窗
				this.$refs.tip.show()
			},
			handleContactCustomerService() { // 联系客服
				console.log('联系客服');
			},
			handleShowBackReason() { // 退款原因弹窗
				this.$refs.backReason.show()
			},
			handlPreviewCode() {
				this.$refs.previewCode.open()
			},
			handleClosePreviewCode() {
				this.$refs.previewCode.close()
			},
			handleGoPickupDetail() {
				uni.navigateTo({
					url: '../pickupDetail'
				});
			},
			handlePay() {
				const _this = this
				if (_this.orderDetail.status == 9) {
					_this.$store.commit('upOrderPayType', 'rentAdd')
					_this.$refs.commonPayAdd.show()
				} else {
					// #ifdef MP-WEIXIN
					uni.requestSubscribeMessage({
						tmplIds: ['p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0'],
						success(res) {
							_this.submitWxNotifyConfirm('p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0', res[
								'p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0'])
							// #endif
							_this.$refs.commonPay.show()
							// #ifdef MP-WEIXIN
						}
					})
					// #endif
				}
			},
			handleGoFeeDescription() { // 跳转到费用说明
				uni.navigateTo({
					url: '../feeDescription?type=6'
				});
			},
			handleSubmitBackReason(reason) {
				this.cancleOrderCommon(reason)
			},
			handleSubmitBackReasonMoney(reason) {
				this.cancleOrderCommon(reason)
			},
			handleReturnCar() { // 还车
				this.$http.get(this.$api.returnRentCar, {
					orderNo: this.orderDetail.orderNo
				}).then(res => {
					if (res.code === 200) {
						this.getOrderDetail()
						uni.showToast({
							title: '还车成功'
						})
					}
				})
			},
			handleGoInsuranceDetail(item, type) { // 跳转到保险详情
				let obj = {
					type: 1,
					id: item.id,
					title: item.name || item.title
				}
				if (type) {
					obj.type = type
				}
				uni.navigateTo({
					url: '../../pagesTravel/serviceDetail?info=' + JSON.stringify(obj),
				});
			},
			cancleOrder(reason) {
				let api = this.$api.cancelRentOrderNoPay + this.orderDetail.orderNo
				if (this.orderDetail.status == 3) { // 司机已经分配，此时取消订单需要付费
					api = this.$api.cancelRentOrderPay +
						`?orderNo=${this.orderDetail.orderNo}&reason=${reason}&refund=${this.orderDetail.qrCodeVo.deduct}`
				} else if (this.orderDetail.status == 2 || this.orderDetail.status == 1) { // 待确认，不强制提交取消理由
					api = this.$api.cancelRentOrderPayAduit + `?orderNo=${this.orderDetail.orderNo}&reason=${reason}`
				}
				this.$http.get(api).then(res => {
					if (res.code === 200) {
						uni.navigateBack({
							delta: 1
						});
					}
				})
			},
			getOrderDetail() {
				this.$http.get(this.$api.getRentOrderDetail + this.orderId).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 200) {
						this.orderDetail = res.data
						this.riderList = res.data.driverSimpleVos
						this.audioFailConfig.content = res.data.zucheSimpleVo.checkFailReason
						this.serviceList = [...res.data.insuranceVos]
						/* 订单状态转换 S */
						switch (res.data.status) {
							case '0':
								this.orderStatus = 'toBePaid'
								break
							case '1':
								this.orderStatus = 'audit'
								break
							case '2':
								this.orderStatus = 'audit'
								break
							case '3':
								this.orderStatus = 'toBoConfirmed'
								break
							case '4':
								this.orderStatus = 'waitingCar'
								break
							case '5':
								this.orderStatus = 'processing'
								break
							case '6':
								this.orderStatus = 'processing'
								break
							case '7':
								this.orderStatus = 'completed'
								break
							case '8':
								this.orderStatus = 'cancelled'
								break
							case '9':
								this.orderStatus = 'addOrder'
								break
							case '10':
								this.orderStatus = 'addOrder'
								break
						}
						/* 订单状态转换 E */
						if (this.orderDetail.status == 0) {
							this.timer = setInterval(() => { // 未支付订单(验证订单是否超时)
								this.countDownStartTime = utils.getCountDownTime(res.data.createTime)
							}, 1000)
						}
					}
				})
			},
			payMoney(pwd) {
				let api = this.$api.payRentOrder
				let money = this.orderDetail.zhuijiaTotal.toString()
				if (this.orderDetail.status == 9) {
					api = this.$api.payRentOrderAdd
				}
				this.$http.post(api, {
					orderNo: this.orderDetail.orderNo,
					payWord: pwd,
					money: money
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						if (this.orderDetail.status == 9) {
							this.$refs.commonPayAdd.closeKeyBoard()
						} else {
							this.$refs.commonPay.closeKeyBoard()
						}
						uni.showToast({
							title: '支付成功'
						})
						this.getOrderDetail() // 更新订单状态
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 130rpx;
		padding-bottom: 118rpx;
	}

	.order_status-wrap {
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		color: #fff;
		height: 130rpx;
		font-size: 30rpx;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 9;
		background-color: $blue;

		.icon {
			height: 36rpx;
			width: 36rpx;
			margin-right: 20rpx;
		}

		&.order_success {
			display: flex;
			justify-content: space-between;

			.l-wrap {
				display: flex;
				align-items: center;
			}

			.r-wrap {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #fff;
				font-size: 26rpx;

				.help-icon {
					margin-right: 20rpx;
				}
			}
		}
	}

	.info-wrap {
		height: 480rpx;
		background: #f5f5f5;
		position: relative;

		.top-dack {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 90rpx;
			background-color: $blue;
			z-index: 1;
		}

		.info {
			// height:342rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 2;
			background: #fff;
			border-radius: 12rpx;
			padding: 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;

			.info_top-wrap {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.type {
					padding: 0 10rpx;
					background-color: #FFF2E0;
					color: $yellow;
					font-size: 22rpx;
					border-radius: 8rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
				}

				.date-wrap {
					flex: 2;
					display: flex;
					justify-content: space-around;
					align-items: center;
					font-weight: bold;

					.duration {
						width: 80rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						font-size: 22rpx;
						border-radius: 18rpx;
						border: 1px solid #ebebeb;
						font-weight: normal;
					}
				}

				.person {
					.person-icon {
						margin-right: 20rpx;
					}
				}
			}

			.info_content-wrap {
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;

				.address-wrap {
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					font-size: 30rpx;
					font-weight: bold;
					position: relative;

					.from,
					.to {
						display: flex;
						align-items: center;

						.type {
							padding: 0 10rpx;
							background-color: #FFF2E0;
							color: $yellow;
							font-size: 22rpx;
							border-radius: 8rpx;
							margin-right: 20rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: center;
						}
					}

					.from {
						margin-bottom: 20rpx;
					}

					.time-wrap {
						padding-left: 44rpx;
						font-size: 30rpx;
						font-weight: normal;
						display: flex;
						align-items: center;
					}
				}
			}

			.chartered_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 160rpx;
				border-bottom: 1px solid #ebebeb;
				margin-bottom: 37rpx;

				&:last-child {
					border: none;
				}

				&.un_item {
					background-color: #eaeaea;
					border-bottom: 1px solid #fff;

					&:last-child {
						border: none;
					}
				}

				.img {
					width: 156rpx;
					height: 89rpx;
					background-color: pink;
					margin-right: 36rpx;
				}

				.chartered_info {
					flex: 1;

					.name {
						font-size: 30rpx;
					}

					.detail {
						margin-top: 17rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price {
							font-size: 24rpx;
							color: $red;
							font-weight: bold;
						}

						.passenger_num {
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.edit-icon {
					padding-left: 80rpx;
				}
			}
		}

	}

	.content-wrap {
		margin-top: 20rpx;

		.input-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			font-size: 30rpx;
			padding: 0 30rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-sizing: border-box;

			.r-wrap {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.price {
					color: $red;
				}
			}
		}

		.remark {
			width: 690rpx;
			border-radius: 12rpx;
			background-color: #fff;
			font-size: 30rpx;
			line-height: 60rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.txt {
				padding: 100rpx;
			}
		}

		.rider_info-wrap {
			width: 690rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx 30rpx 0;
			box-sizing: border-box;

			.common_tit-wrap {
				box-sizing: border-box;

				.l-wrap {
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.back_reason {
				font-size: 30rpx;
				font-weight: 500;
				line-height: 50rpx;
				padding: 20rpx 0;
			}

			.driver_list {
				transition: all 0.3s ease;
				overflow: hidden;

				.driver_item {
					display: flex;
					align-items: center;
					height: 100rpx;
					font-size: 28rpx;
					font-weight: 500;
					border-bottom: 1px solid #ebebeb;
					justify-content: space-between;

					.name {
						display: inline-block;
						font-size: 30rpx;
						font-weight: bold;
						width: 160rpx;
						padding-right: 20rpx;
						box-sizing: border-box;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}

					.num-wrap {
						flex: 1;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}

			.service_list {
				transition: all 0.3s ease;
				overflow: hidden;

				.service_item {
					font-size: 30rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #ebebeb;

					.terms {
						color: $blue;
					}
				}
			}

			.more_rider {
				height: 83rpx;
				line-height: 83rpx;
				text-align: center;
				color: #999;
				border-top: 1px solid #ebebeb;
			}
		}
	}


	.order_info-wrap {
		margin-top: 20rpx;
		line-height: 50rpx;
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.btm_btn-wrap {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 30rpx;
		z-index: 3;
		background-color: #fff;
		padding: 0 30rpx;
		box-shadow: 0 2px 5px 1px #ebebeb;

		.btn {
			padding: 0 30rpx;
			min-width: 60rpx;
			border-radius: 8rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;

			&.cancle {
				border: 1px solid #ccc;
				color: #ccc;
			}

			&.pay {
				color: #fff;
				background-color: $blue;
				margin-left: 20rpx;
			}

			&.add_pay {
				background-color: $yellow;
				color: #fff;
			}
		}
	}
</style>
